<template>
    <div class="main coupon-edit">
        <section>
            <el-form  size="medium" ref="form" label-width="150px" :rules="commonRules" :model="busMaterialLib">
                <div class="block-header"><div>素材内容</div></div>
                <div class="block-content">
                    <el-form-item label="素材名称:" prop="name" :rules="commonRules.notNullRule">
                        <el-input v-model="busMaterialLib.name" placeholder="用于后台快速查找素材，不超过15字" maxlength="15"></el-input>
                    </el-form-item>
                    <el-form-item label="素材类型:" prop="type" :rules="commonRules.notNullRule">
                        <el-radio-group v-model="busMaterialLib.type" >
                            <el-radio  :label="1">图文</el-radio>
                            <el-radio  :label="2">图片</el-radio>
                            <el-radio  :label="3">视频</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="文案素材:" prop="content" :rules="commonRules.notNullRule" v-if="busMaterialLib.type===1">
                        <el-input type="textarea" v-model="busMaterialLib.content" placeholder="请输入文案，800字以内，支持特殊符号及表情输入" maxlength="800"></el-input>
                    </el-form-item>
                    <el-form-item label="图片素材:" prop="busMaterialLibDetailList" :rules="commonRules.notNullRule"  v-if="busMaterialLib.type!==3">
                        <ul class="upload-img-list">
                            <draggable v-model="busMaterialLib.busMaterialLibDetailList" :options="{group:'resourceList'}" @start="drag=true" @end="drag=false">
                                <li class="img-preview" v-for="(imgItem, imgIndex) of busMaterialLib.busMaterialLibDetailList" :key="imgIndex" >
                                    <img :src="imgItem.resource" alt="">
                                    <div class="img-preview-mask">
                                        <div class="mask-btn">
                                            <i title="删除" class="el-icon-delete" @click="()=>{busMaterialLib.busMaterialLibDetailList.splice(imgIndex, 1)}"></i>
                                        </div>
                                    </div>
                                </li>
                            </draggable>
                            <li>
                                <label class="upload-btn">
                                    <input type="file" @change="(event)=>{uploadImg(event, busMaterialLib.busMaterialLibDetailList)}"/>
                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                                </label>
                            </li>
                        </ul>
                        <div style="color: red">最多添加9张，单张图片控制在5M以内</div>   
                    </el-form-item>
                    <el-form-item label="视频素材:" prop="videoResource" :rules="commonRules.notNullRule"  v-if="busMaterialLib.type===3">
                        <el-upload 
                                class="avatar-uploader"
                                accept="video/*"
                                :action="upladUrl"
                                name="file"
                                :show-file-list="false"
                                :before-upload="beforeUploadVideo"
                                :on-success="(res)=>{
                            busMaterialLib.videoResource = replaceImgUrl(res.filePath)
                        }">
                            <video v-if="busMaterialLib.videoResource" autoplay="autoplay" loop="loop" :src="busMaterialLib.videoResource">
                                您的浏览器不支持HTML5 Video
                            </video>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <div style="color: red">视频控制在50M以内，MP4格式</div>  
                    </el-form-item>  
                </div>
                <el-form-item label="" style="margin-top:20px;">
                    <el-button type="primary" size="medium" :loading="btnLoading" @click="save"  >保存</el-button>
                    <el-button type="info" size="medium" plain @click="$router.push({ name: 'materialLibrary' })">返回</el-button>
                </el-form-item> 
            </el-form> 
        </section>
    </div>
</template>
<script>
import draggable from 'vuedraggable'
  export default {
    name: 'materialLibraryEdit',
    components: {
      draggable
    },
    mounted(){
        this.busMaterialLib.id = this.$route.query.id
        if(this.busMaterialLib.id) {
            this.getConfig()
        }
    },
    data(){
        return {
            busMaterialLib: {
                content: '',
                id: '',
                name: '',
                busMaterialLibDetailList:[],
                // resource: '',
                type: 1,
                videoResource: ''
            },
            btnLoading: false
        }
    },
    methods: {
        getConfig(){
            this.request({
            url: '/bus-material-lib/get?id='+this.busMaterialLib.id,
            method: 'get',
            }).then((res) => {
                if(res.code===200) {
                    this.busMaterialLib = {
                        ...res.data,
                        busMaterialLibDetailList: res.data.type === 3 ? [] : res.data.busMaterialLibDetailList,
                        videoResource: res.data.type === 3 ? res.data.busMaterialLibDetailList[0].resource : ''
                    }
                }
            }).catch(err => {
               this.$message.success(err.message)
            });
        },
        save() {
            this.$refs.form.validate(valid => {
                if(valid) {
                    if(this.busMaterialLib.type===3){
                        this.busMaterialLib.busMaterialLibDetailList=[{resource: this.busMaterialLib.videoResource}]
                        // this.busMaterialLib.resource = this.busMaterialLib.videoResource
                    }
                    this.request({
                        url: '/bus-material-lib/save',
                        method: 'post',
                        data:this.busMaterialLib
                    }).then((res) => {
                        console.log(res)
                        if(res.code===200) {
                            this.$message.success(res.msg)
                            this.btnLoading=false
                            this.$router.push({ name: 'materialLibrary' })
                        }
                    }).catch((err)=> {
                        this.btnLoading = false
                    })   
                }     
            })
        },
        uploadImg(event, item) {
            console.log(item.length)
            if(item.length > 8) {
                this.$message.error('上传超过9张图片')
                return false
            }
            const file = event.target.files[0]
            if(!file.type.match('image/')){
                 this.$message.error('请上传图片')
                return false
            }
            // const isLt5M = file.size / 1024 / 1024 < 5
            // console.log(isLt5M)
            // if (!isLt5M) {
            //     this.$message.error('上传图片大小不能超过 5MB!')
            //     return false
            // }
            this.picFileUpload(file, (res) => {
                item.push({resource: this.replaceImgUrl(res.filePath)});
            }, {limitSize: 5}, true)
        },
        beforeUploadVideo(file) {
            if(!file.type.match('video/mp4')){
                this.$message.error('请上传MP4格式视频')
                return false
            }
            const isLt50M = file.size / 1024 / 1024 < 50
            if (!isLt50M) {
                this.$message.error('上传视频大小不能超过 50MB!')
            }
            return isLt50M
        }
    }   
  }
</script>
<style lang="scss">
    @import "../../../styles/_mixin.scss";
    .block-header{
        color: #1ea0ff;
        font-size: 14px;
        padding: 12px 0;
        margin-bottom: 12px;
        background: #f7f7f7;
        &>div{
            padding: 0 12px;
            border-left: 2px solid #1ea0ff;
        }
    }

    .coupon-edit .el-form .el-textarea .el-textarea__inner{
        height: auto;
    }
    .adviceTxt{
        color: #8c939d
    }
    .use-type-block{
        @include flex;
        margin-left: 24px;
    }
    .add-btn-block{
        margin:  0 0 12px 24px;
    }
     .section-content{
         .el-input-group__prepend{
             padding: 0 5px;
         }
        .line{
            text-align: center;
        }
        .el-input{
            width: 100%;
            max-width: 500px;
            min-width: 150px;
        }
        .el-icon-delete{
            color: red;
            font-size: 16px;
            margin: 0 12px;
            cursor: pointer;
        }
        .goods-item{
            padding: 12px 0;
            // border: 1px solid #efefef;
            border-radius: 6px;
            position: relative;

            .avatar-uploader .el-upload,
            .upload-img-list li,
            .upload-img-list .upload-btn{
                width: 120px;
                height: 120px;
                line-height: 118px;
            }
            .upload-img-list .img-preview .img-preview-mask .mask-btn {
                margin-top: 47px;
                line-height: 36px;
                text-align: center;
            }

            .present-item{
                padding: 6px;
                border: 1px solid #efefef;
                margin-bottom: 12px;
                position: relative;

                .el-icon-error{
                    color: red;
                    font-size: 18px;
                    cursor: pointer;
                    top: 12px;
                    right: 12px;
                    position: absolute;
                    z-index: 9;
                }

                &>.el-form-item {
                    margin-bottom: 22px;
                }
                .el-input,
                .el-select{
                    width: 100%;
                    max-width: 160px;
                }
            }
        }
        .add-btn-block{
            margin:  0 0 12px 24px;
        }
        .footer-block{
            text-align: center;
            margin-top: 24px;
        }
    }
</style>
